<template>
  <div class="product">
    <nuxt-link :to="`/product/${datas.product.product_id}`">
      <div
        class="product-photo"
        :style="{background: `url('${datas.product.images.length ? datas.product.images[0].thumbnail_url : ''}') center center no-repeat`,backgroundSize:'100% 100%'}"
      />
    </nuxt-link>
    <div class="product-content">
      <nuxt-link :to="`/product/${datas.product.product_id}`">
        <div class="product-title">
          <div class="product-icon" />
          <div class="product-title-name">
            {{ datas.product.product_name }}
          </div>
        </div>
      </nuxt-link>
      <div class="product-doctor">
        {{ dynamic?datas.product.package.package_detail.doctor.user_name:datas.doctor.user_name }} | {{ dynamic? datas.product.package.package_detail.doctor.doctor_title:datas.doctor.user_attributes?datas.doctor.user_attributes.doctor_title:'' }}
      </div>
      <div class="product-price">
        <div class="product-selling_price">
          ￥{{ datas.product.package.sale.selling_price }}
        </div>
        <div class="product-original_price">
          ￥{{ datas.product.package.sale.original_price }}
        </div>
      </div>
    </div>
    <nuxt-link :to="`/product/${datas.product.product_id}`">
      <div class="product-right">
        <div class="product-right-icon" />
        <div class="product-right-text">
          查看详情
        </div>
      </div>
    </nuxt-link>
  </div>
</template>
<script>
export default {
  props: {
    datas: {
      type: Object,
      default: () => { }
    },
    dynamic: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped lang="scss">
.product {
  width: 780px;
  height: 100px;
  background: rgba(246, 246, 246, 1);
  border-radius: 4px;
  margin-top: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  .product-photo {
    width: 80px;
    height: 80px;
  }
  .product-title {
    font-size: 15px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 21px;
    display: flex;
    .product-title-name{
      width: 585px;
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
  .product-title:hover {
    cursor: pointer;
  }
  .product-content {
    width: 606px;
    margin-left: 10px;
  }
  .product-doctor {
    font-size: 12px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-top: 11px;
  }
  .product-icon {
    width: 18px;
    height: 19px;
    background: url("~assets/img/volume-icon.png") center center no-repeat;
    background-size: 100% 100%;
  }
  .product-price {
    margin-top: 9px;
    display: flex;
    .product-selling_price {
      font-size: 16px;
      font-weight: 600;
      color: rgba(255, 59, 88, 1);
      line-height: 14px;
    }
    .product-original_price {
      font-size: 12px;
      color: rgba(153, 153, 153, 1);
      line-height: 14px;
      margin-left: 7px;
      text-decoration: line-through;
    }
  }
  .product-right {
    width: 54px;
    margin-right: 10px;
    margin-top: 19px;
    text-align: center;
    .product-right-icon{
        width: 23px;
        height: 21px;
        background: url('~assets/img/query-icon.png') center center no-repeat;
        background-size: 100% 100%  ;
        margin: 0 auto;
    }
    .product-right-icon:hover{
      cursor: pointer;
    }
    .product-right-text{
      font-size:12px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(153,153,153,1);
      line-height:17px;
      margin-top: 4px;
    }
    .product-right-text:hover{
      cursor: pointer;
    }
  }
}
</style>
